<template>
  <div class="merchant-detail">
    <el-card>
      <div slot="header" class="clearfix">
        <span>商家详情</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="goBack">返回</el-button>
      </div>

      <el-form :model="form" label-width="120px" v-if="form" v-loading="loading">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="商家名称">
              <el-input v-model="form.name" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话">
              <el-input v-model="form.phone" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="身份证号">
              <el-input v-model="form.idNo" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="详细地址">
              <el-input v-model="form.address" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="锁定用户数量">
              <el-input-number v-model="form.lockNum" :min="0" :max="form.lockNumLimit"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="锁定用户上限">
              <el-input-number v-model="form.lockNumLimit" :min="0"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="身份证正面">
          <el-image
            v-if="form.idCardUrl"
            :src="form.idCardUrl"
            style="width: 200px; height: 120px;"
            :preview-src-list="[form.idCardUrl]">
          </el-image>
        </el-form-item>

        <el-form-item label="身份证背面">
          <el-image
            v-if="form.idCardBackUrl"
            :src="form.idCardBackUrl"
            style="width: 200px; height: 120px;"
            :preview-src-list="[form.idCardBackUrl]">
          </el-image>
        </el-form-item>

        <el-form-item label="营业执照">
          <el-image
            v-if="form.certificateUrl"
            :src="form.certificateUrl"
            style="width: 200px; height: 120px;"
            :preview-src-list="[form.certificateUrl]">
          </el-image>
        </el-form-item>

        <el-form-item label="卫生许可证">
          <el-image
            v-if="form.hygienicUrl"
            :src="form.hygienicUrl"
            style="width: 200px; height: 120px;"
            :preview-src-list="[form.hygienicUrl]">
          </el-image>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleSave">保存修改</el-button>
          <el-button @click="goBack">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getMerchantDetail, updateMerchant } from '@/api/aggregation'

export default {
  name: 'MerchantDetail',
  data() {
    return {
      form: null,
      merchantId: null,
      loading: false
    }
  },
  created() {
    this.merchantId = this.$route.query.id
    if (!this.merchantId) {
      this.$message.error('缺少商家ID参数')
      this.goBack()
      return
    }
    this.loadData()
  },
  methods: {
    async loadData() {
      this.loading = true
      try {
        const response = await getMerchantDetail({ id: this.merchantId })

        if (response.code === 0) {
          this.form = response.data
        } else {
          this.$message.error(response.msg || '加载商家详情失败')
          this.goBack()
        }
      } catch (error) {
        console.error('加载商家详情失败:', error)
        this.$message.error('加载商家详情失败')
        this.goBack()
      } finally {
        this.loading = false
      }
    },
    async handleSave() {
      if (!this.form) {
        return
      }

      this.loading = true
      try {
        const response = await updateMerchant(this.form)

        if (response.code === 0) {
          this.$message.success('保存成功')
          this.goBack()
        } else {
          this.$message.error(response.msg || '保存失败')
        }
      } catch (error) {
        console.error('保存失败:', error)
        this.$message.error('保存失败')
      } finally {
        this.loading = false
      }
    },
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
.merchant-detail {
  padding: 20px;
}
</style>
